<template>
  <view class="content">
    <view class="product-search-bar">
      <uni-search-bar v-model="searchProduct" placeholder="输入产品名称" radius="100" clearButton="auto"
        @confirm="handleSearch" />
      <view class="product-action-buttons">
        <button class="search-btn" @click="handleSearch">搜索</button>
        <button class="add-btn mini-btn" @click="handleAddProduct">新增产品</button>
      </view>
    </view>

    <view class="product-list">
      <uni-pagination :current="pagination.page" :pageSize="pagination.limit" :total="pagination.total"
        @change="handlePageChange" />
      <view class="product-item" v-for="(product, index) in products" :key="index">
        <view class="product-info" @click="handleProductClick(product.product_id)">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-status" :style="{color: product.is_deleted ? '#FF0000' : '#4CAF50'}">
  {{ product.is_deleted ? '未激活' : '激活' }}
</text>
          <text class="product-price">¥{{ product.price.toFixed(2) }}</text>
        </view>
        <view class="product-actions">
          <button 
            class="edit-btn mini-btn" 
            @click.stop="product.is_deleted ? handleActivateProduct(product.product_id) : handleDeleteProduct(product.product_id)"
          >
            {{ product.is_deleted ? '激活' : '删除' }}
          </button>
        </view>

        <view class="product-actions">
          <button class="edit-btn mini-btn" @click.stop="handleEditProduct(product.product_id)">
            编辑
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import productApi from '@/utils/product.js'

export default {
  props: {
    storeId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      searchProduct: '',
      products: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    }
  },
  methods: {
    async handleSearch() {
      try {
        const params = {
          page: this.pagination.page,
          limit: this.pagination.limit,
          name: this.searchProduct || undefined,
          storeId: this.storeId
        }

        const res = await productApi.getByPage(params)
        this.products = res.list || []
        this.pagination.total = res.total || 0
      } catch (error) {
        uni.showToast({
          title: '获取产品列表失败',
          icon: 'none'
        })
      }
    },
    handlePageChange(e) {
      this.pagination.page = e.current
      this.handleSearch()
    },
    handleAddProduct() {
      uni.navigateTo({
        url: `/pages/product/edit?store_id=${this.storeId}`
      })
    },
    handleEditProduct(productId) {
      uni.navigateTo({
        url: `/pages/product/edit?store_id=${this.storeId}&product_id=${productId}`
      })
    },
    handleProductClick(productId) {
      // 可以添加产品详情页面的跳转
      uni.navigateTo({
        url: `/pages/product/detail?product_id=${productId}`
      })
    },
    async handleActivateProduct(productId) {
        try {
          await productApi.update( { is_deleted: false,product_id:productId })
            uni.showToast({
                title: '激活成功',
                icon: 'success'
            })
            this.handleSearch() // 刷新列表
        } catch (error) {
            uni.showToast({
                title: '激活失败',
                icon: 'none'
            })
        }
    },
    
    async handleDeleteProduct(productId) {
        try {
            await productApi.update( { is_deleted: true,product_id:productId })
            uni.showToast({
                title: '删除成功',
                icon: 'success'
            })
            this.handleSearch() // 刷新列表
        } catch (error) {
            uni.showToast({
                title: '删除失败',
                icon: 'none'
            })
        }
    }
  },
  created() {
    this.handleSearch()
  },
  onShow() {
    this.handleSearch()
  }
}
</script>

<style>
.content {
  width: 100%;
}

.product-search-bar {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16rpx;
  margin-top: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.product-action-buttons {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}

.search-btn {
  margin-right: 20rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 40rpx;
}

.add-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #f1f1f1 !important;
  color: #666 !important;
  border-radius: 40rpx;
}

.product-list {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.product-info {
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 32rpx;
  color: #333;
}

.product-price {
  font-size: 28rpx;
  color: #FF9500;
  margin-top: 10rpx;
}

.edit-btn {
  padding: 0 20rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #f1f1f1 !important;
  color: #666 !important;
  border-radius: 28rpx;
  font-size: 26rpx;
}
.product-status {
  font-size: 24rpx;
  margin-top: 8rpx;
}
</style>
